<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 10px orange solid;
            /* 

                内边距（padding）
                -内容区和边框之间的距离是内边距
                -一共有四个方向的内边距
                padding-top
                padding-right
                padding-bottom
                padding-left

                -内边距的设置会影响到盒子的大小
                -背景颜色会延伸到内边距上

            盒子的可见框大小，由内容区 内边距 和边框共同决定。
            所以在计算盒子大小时，需要将这三个区域加到一起计算
             */

             /* padding-top: 100px;
             padding-left: 100px;
             padding-right: 100px;
             padding-bottom: 100px; */

             /* padding 内边距的简写属性，可以同时指定四个方向的内边距
                规则和border-width一样 */

                padding: 10px 20px 30px 40px;
                padding: 10px 20px 30px ;
                padding: 10px 20px ;
                padding: 10px ;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>